import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(VueRouter); // 在这个项目安装这个依赖,默认会调用install这个方法

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
    },
    {
        path: '/about/:id',
        name: 'About',
        // 路由的懒加载
        component: () => import('../views/About.vue'),
    },
    {
        path: '/news',
        name: 'News',
        component: () => import('@/views/News.vue'),
        // 嵌套路由,嵌套路由子路由不允许有/
        children: [
            {
                // 当NewsDetail/:id/ 匹配成功，
                // NewsDetail 会被渲染在 News 的 <router-view> 中
                path: 'NewsDetail/:a',
                component: () => import('@/views/NewsDetail.vue'),
                props: true,
            },
        ],
    },
    {
        // 会匹配所有路径
        path: '*',
        name: 'NotFound',
        component: () => import('@/views/NotFound.vue'),
    },
];

// router: 路由器
const router = new VueRouter({
    mode: 'history', // mode: 'hash',
    base: process.env.BASE_URL,
    routes, // 网线
});

export default router;
